<template>
  <div>
    <!-- 顶部面包屑 -->
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>学籍成绩</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 用户头像 -->
        <div class="demo-image__preview" style="margin-top:24px">
          <el-image
            style="width: 50px; height: 50px ; border-radius:25px"
            :src="url"
            :preview-src-list="srcList"
          >
            <img :src="url" alt="用户头像" />
          </el-image>
          <span>小明 | 前端工程师</span>
        </div>
        <el-divider></el-divider>
      </el-col>
    </el-row>
    <!-- 内容部分 -->
    <el-tabs :tab-position="tabPosition" style="height: 200px;">
      <el-tab-pane label="学生学籍">
        <!-- 学籍按钮 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="4">
              <el-form-item label="姓名:" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="身份证号码:" prop="fid">
                <el-input v-model="ruleForm.fid"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 学籍表格 -->
        <el-table :data="tableData" border style="width: 80%">
          <el-table-column prop="schoolId" label="学校识别码" width="150"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="date" label="出生日期" width="120"></el-table-column>
          <el-table-column prop="fid" label="身份证号码" width="170"></el-table-column>
          <el-table-column prop="Hometown" label="籍贯"></el-table-column>
          <el-table-column prop="Clan" label="名族"></el-table-column>
          <el-table-column prop="nationality" label="国籍/地区"></el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 成绩按钮 -->
      <el-tab-pane label="成绩查询">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="4">
              <el-form-item label="姓名:" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="学号:" prop="xid">
                <el-input v-model="ruleForm.fid"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <el-button type="primary" @click="scoreSearch">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 成绩表格 -->
        <el-table :data="scoreData" border style="width: 80%">
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="class" label="班级"></el-table-column>
          <el-table-column prop="xid" label="学号" width="120"></el-table-column>
          <el-table-column prop="yw" label="语文"></el-table-column>
          <el-table-column prop="gs" label="高数"></el-table-column>
          <el-table-column prop="wy" label="外语"></el-table-column>
          <el-table-column prop="wl" label="物理"></el-table-column>
          <el-table-column prop="hx" label="化学"></el-table-column>
          <el-table-column prop="sw" label="生物"></el-table-column>
          <el-table-column prop="allScore" label="总分"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="成绩统计">
        <!-- 统计按钮 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="4">
              <el-form-item label="专业" prop="discipline">
                <el-select v-model="ruleForm.discipline" @change="dSearch" placeholder="请选择专业">
                  <el-option label="请选择" value=""></el-option>

                  <el-option label="外语" value="外语"></el-option>
                  <el-option label="计算机" value="计算机"></el-option>
                  <el-option label="金融管理" value="金融管理"></el-option>
                  <el-option label="电子商务" value="电子商务"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="班级" prop="class">
                <el-select v-model="ruleForm.class" placeholder="请选择班级">
                  <el-option label="请选择" value=""></el-option>

                  <el-option label="221" value="221"></el-option>
                  <el-option label="222" value="222"></el-option>
                  <el-option label="223" value="223"></el-option>
                  <el-option label="224" value="224"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <el-button type="primary" @click="allScoreSearch">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 统计表格 -->
        <el-table
          :data="allScoreData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          border
          style="width: 100%"
        >
          <el-table-column type="index" :index="indexMethod" width="50" label="序号"></el-table-column>

          <el-table-column prop="discipline" label="专业"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="class" label="班级"></el-table-column>
          <el-table-column prop="xid" label="学号" width="120"></el-table-column>
          <el-table-column prop="yw" label="语文"></el-table-column>
          <el-table-column prop="gs" label="高数"></el-table-column>
          <el-table-column prop="wy" label="外语"></el-table-column>
          <el-table-column prop="wl" label="物理"></el-table-column>
          <el-table-column prop="hx" label="化学"></el-table-column>
          <el-table-column prop="sw" label="生物"></el-table-column>
          <el-table-column prop="allScore" label="总分"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <div v-if="allScoreData.length>pagesize">
          <div class="block my-fy">
            <el-pagination
              @size-change="px1SizeChange"
              @current-change="px1CurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="allScoreData.length"
              :hide-on-single-page="true"
            ></el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "myScore",
  data() {
    return {
      currentPage: 1, //默认页码为1
      pagesize: 5, //默认一页显示5条
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      publicPath: process.env.BASE_URL,
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      tabPosition: "left",
      ruleForm: {
        name: "",
        fid: "", //身份证号
        xid: "", //学号
        discipline: "", //专业
        class: "", //班级
      },
      rules: {
        name: [
          { required: true, message: "请输入正确的姓名", trigger: "blur" },
        ],
        fid: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          { min: 18, max: 18, message: "长度为18个字符", trigger: "blur" },
        ],
        xid: [
          { required: true, message: "请输入学号", trigger: "blur" },
          { min: 8, max: 8, message: "学号不正确", trigger: "blur" },
        ],
        discipline: [
          { required: true, message: "请选择专业", trigger: "change" },
        ],
        class: [{ required: true, message: "请选择班级", trigger: "change" }],
      },
      //   表格
      tableData: [
        {
          schoolId: "CD900001", //学校识别码
          name: "王小虎",
          sex: "男",
          date: "2000/05/04", //出生日期
          fid: "360321200005046535", //身份证号码
          Hometown: "四川成都", //籍贯
          Clan: "汉族", //名族
          nationality: " 中国", //国籍
        },
      ],
      scoreData: [
        {
          discipline: "计算机", //专业
          name: "王小虎",
          class: 224, //班级
          xid: "20201012", //学号
          yw: 120, //语文
          gs: 140, //高数
          wy: 130, //外语
          wl: 89, //物理
          hx: 90, //化学
          sw: 95, //生物
          allScore: 664, //总分
        },
      ],
      allScoreData: [
        {
          discipline: "计算机", //专业
          name: "王小虎",
          class: 224, //班级
          xid: "20201012", //学号
          yw: 120, //语文
          gs: 140, //高数
          wy: 130, //外语
          wl: 89, //物理
          hx: 90, //化学
          sw: 95, //生物
          allScore: 664, //总分
        },
        {
          discipline: "金融管理", //专业
          name: "小明",
          class: 224, //班级
          xid: "20201012", //学号
          yw: 120, //语文
          gs: 140, //高数
          wy: 130, //外语
          wl: 89, //物理
          hx: 90, //化学
          sw: 95, //生物
          allScore: 664, //总分
        },
        {
          discipline: "计算机", //专业
          name: "小黄",
          class: 224, //班级
          xid: "20201012", //学号
          yw: 120, //语文
          gs: 140, //高数
          wy: 130, //外语
          wl: 89, //物理
          hx: 90, //化学
          sw: 95, //生物
          allScore: 664, //总分
        },
        {
          discipline: "电子商务", //专业
          name: "小草",
          class: 224, //班级
          xid: "20201012", //学号
          yw: 120, //语文
          gs: 140, //高数
          wy: 130, //外语
          wl: 89, //物理
          hx: 90, //化学
          sw: 95, //生物
          allScore: 664, //总分
        },
        {
          discipline: "计算机", //专业
          name: "小华",
          class: 224, //班级
          xid: "20201012", //学号
          yw: 120, //语文
          gs: 140, //高数
          wy: 130, //外语
          wl: 89, //物理
          hx: 90, //化学
          sw: 95, //生物
          allScore: 664, //总分
        },
        {
          discipline: "计算机", //专业
          name: "小欢",
          class: 224, //班级
          xid: "20201012", //学号
          yw: 120, //语文
          gs: 140, //高数
          wy: 130, //外语
          wl: 89, //物理
          hx: 90, //化学
          sw: 95, //生物
          allScore: 664, //总分
        },
        {
          discipline: "计算机", //专业
          name: "小欢欢",
          class: 223, //班级
          xid: "20201012", //学号
          yw: 120, //语文
          gs: 140, //高数
          wy: 130, //外语
          wl: 89, //物理
          hx: 90, //化学
          sw: 95, //生物
          allScore: 664, //总分
        },
      ],
    };
  },
  watch:{
     
  },
  methods: {
    // 统计查询
    allScoreSearch(e) {
      this.allScoreData=this.$options.data().allScoreData;//重新初始化allScoreData数组
      let a =this.ruleForm;
      let aTable = this.allScoreData;
      //  console.log(aTable);
      //  console.log(a);
      let arr =[];
      for(let i=0;i<aTable.length;i++){
         
        if(a.discipline==aTable[i].discipline && a.class==aTable[i].class){
          arr.push(aTable[i]);
        }else if(a.discipline==aTable[i].discipline && a.class ==''){
            arr.push(aTable[i]);
        }else if(a.discipline=='' && a.class ==''){
          arr=aTable
        }
        // console.log(arr)
        this.allScoreData = arr;
      }
      
    },
    // 下拉框的值改变时初始化数组的值
    dSearch(){
      // this.allScoreSearch();
      
    },
    // 学籍查询
    onSearch(){

    },
    // 成绩查询
    scoreSearch(){

    },
    //一页显示多少条
    px1SizeChange(size) {
      this.pagesize = size;
    },
    // 显示当前页数
    px1CurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    // 解决分页索引不改变
    indexMethod(index) {
      // console.log(index);
      return (this.currentPage - 1) * this.pagesize + index + 1; 
    },
  },
};
</script>

<style scoped lang="less">
.el-tabs--left,
.el-tabs--right {
  height: 100% !important;
}
.my-fy {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #e4e4e4;
  box-shadow: 0 0 3px 1px #e4e4e4;
  border-radius: 3px;
}
</style>